<%--
  Created by IntelliJ IDEA.
  User: ano
  Date: 2024/1/21
  Time: 12:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<html>
<head>
    <title>top</title>
    <link rel="stylesheet" href="<%=basePath%>/css/top1.css">
    <%--引入jQuery--%>
    <script src="<%=basePath%>/js/jquery-3.7.1.min.js"></script>
    <%--在top页面引入layui框架--%>
    <link rel="stylesheet" href="<%=basePath%>/layui/css/layui.css">
    <script src="<%=basePath%>/layui/layui.js"></script>
</head>
<body>
    <div class="top">
    <div class="logo myFlex_x">
        <img class="cat" src="<%=basePath%>/img/cat.png" style="height: 50px">
    </div>
        <div class="nav myFlex_x">
            <div class="everyNav">
                <span>首页</span>
            </div>
            <div onclick="goToCat(this)" class="everyNav">
                <span>商城</span>
            </div>

            <div class="everyNav">
                <span>关于</span>
            </div>
        </div>
        <div class="user myFlex_x">
            <c:if test="${sessionScope.user.userName!='' && sessionScope.user.userName!=null}">
                欢迎：<span>${sessionScope.user.userName}</span>
                <span class="loginOut" style="color:#d19f4f;margin-left: 20px;cursor: pointer">退出登录</span>
            </c:if>
            <c:if test="${sessionScope.user.userName=='' || sessionScope.user.userName==null}">
                <!--登录标签距离右边的注册标签30px-->
                <div class="everyUser myFlex_x" style="margin-right: 20px">
                    <span class="login">登录</span>
                </div>
                <div class="everyUser myFlex_x">
                    <span class="registry">注册</span>
                </div>
            </c:if>
        </div>
    </div>
<script>
    /*Java Script：前端脚本语言*/
    function goToCat(that){
        // 当点击事件触发时，自动调用这个goTo方法
        // goTo方法的左右是由前端发送新的请求给后端，让后端跳转到新的页面
        // window:当前浏览器窗口
        /*在当前页面刷新出新页面
        window.location.href="访问后端地址";*/

        // get请求传参："地址?id="+id（字符串拼接）
        window.open("<%=basePath%>/cat");
    }
    /*function goToAbout(that){
        window.open("../about");
    }*/

    /*登录，注册功能*/
    // 使用layui框架需要先对框架进行初始化
    layui.use('layer',function (){
        var layer=layui.layer;
        $(".login").click(function (){
            /*登录弹窗*/
            layer.open({
                type:2,
                title: '欢迎登录',
                shadeClose: true,   // 是否开启点击阴影弹窗关闭的效果
                shade: 0.3,    // 开启弹窗后的阴影是否显示
                maxmin: true, //开启最大化最小化按钮
                area: ['300px', '300px'],// 宽，高
                content: 'view/login.jsp'// 引入登录页面的表单
            });
        })
        $(".registry").click(function (){
            layer.open({
                type: 2,// 弹窗的窗口模式
                title: '欢迎注册',
                shadeClose: true,   // 是否开启点击阴影弹窗关闭的效果
                shade: 0.3,    // 开启弹窗后的阴影是否显示
                maxmin: true, //开启最大化最小化按钮
                area: ['300px', '300px'],// 宽，高
                content: 'view/registry.jsp'// 引入注册页面的表单
            });
        })
        // 点击注销键，弹出询问框
        $(".loginOut").click(function (){
            layer.confirm('确定退出登录？', {icon: 3, title:'提示'}, function(index){
                //do something
                $.ajax({
                    url:"<%=basePath%>/user?method=loginOut",
                    success:function (result){
                        var res=Number(result);
                        if(res==0){
                            layer.msg("退出登录失败！");
                        }else {
                            layer.msg("退出登录成功！",function (){
                                window.location.reload();  // 重新加载
                            })

                        }
                    }
                })
                layer.close(index);
            });
        })
    })

</script>
</body>
</html>
